<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 使用 v-cloak 能够解决插值表达式闪烁问题 -->
      <p v-cloak>++++{{msg}}----</p>
      <!-- 默认v-text是没有闪烁问题的 -->
      <h4 v-text="msg">---------</h4>
      <!-- v-text会覆盖元素中原本的内容,但是插值表达式不会,只会替换自己的占位符 -->

      <div>{{msg2}}</div>
      <div v-text="msg2"></div>
      <!-- v-html会覆盖元素中原本的内容,并将内容以html输出 -->
      <div v-html="msg2">212121</div>

      <!-- v-bind: 是vue中提供的用于绑定属性的指令 -->
      <!-- v-bind:title中的内容当做表达式来解析,解析的结果当做title输出 -->
      <!-- v-bind指令可以简写为 :要绑定的属性 -->
      <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> -->

      <!-- v-on: 事件绑定机制 -->
      <!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="show"> -->
      <!-- v-on指令可以简写为 @事件名称 -->
      <input type="button" value="按钮" :title="mytitle + '123'" @click="show">

    </div>

    <script src="./lib/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: '123',
          msg2: '<h1>我是一个h1标签</h1>',
          mytitle: '这是一个自己定义的title'
        },
        methods:{ // 定义当前vue实例所有可用的方法
          show: function(){
            alert('hello');
          }
        }
      })
    </script>

  </body>
</html>
